<template>
  <div class="add">
    <input 
      type="text" 
      placeholder="待办事项"
      required="required"
      autocomplete="off"
      @keydown.enter="submit" 
      v-model="content"
    >
    <button type="submit" @click="submit">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    // 提交 点击后将数据提交 然后兄弟组件可以使用数据遍历显示
    // 兄弟组件通信 使用vuex 
    submit() {
      let that = this,
          // 对象存放数据 可以通过添加事件将数据放到数组中间
          // id 遍历时可以使用 type用来判断未 已 取消 
          // content输入文本 time已完成里面要显示时间
          params = {
            id: 0,
            type: 1,
            content: '',
            time: ''
          };
      // 去掉输入内容前后输入的空格
      that.content = that.content.trim();
      if(that.content) {
        params.content = that.content;
        // 将数据存入数组中 使用vuex 方便数据共享 子组件通信
        that.$store.dispatch('addevent',params);
        // 将输入框的文本清除 否则要自己手动删除
        that.content = ''
        // 使用toast提示添加成功
        that.$toast('添加成功')
      }
    }
  }
}
</script>

<style scoped lang="scss">
// $border_color: #00D1B2;
// $bg_color: #00D1B2;
.add {
  display: flex;
  input {
    flex: 1;
    padding: 0.2em 0.5em;
    border-radius: 0.2em;
    outline: none;
    border: 1px solid;
    border-color: #C0CCDA;
    // &:focus {
    //   border-color: $border_color;
    // }
  }
  button {
    width: 5em;
    margin-left: .5em;
    padding: 0.5em 1em;
    border: none;
    // background-color: $bg_color;
    color: #fff;
    border-radius: .2em;
    cursor: pointer;
  }
}
</style>